<template>
  <div>
    <PanelSplitTwo bottomToolbarHeight="0" :num="2">
    <template #top>
      <SetUserSelect
        :key="keys"
        class="queryForm"
        :formData="orderSelect"
        v-model:queryParams="paginationParams"
        @selectFunc="selectFunc"
      ></SetUserSelect>
    </template>
     <template #centerToolbar>
        <div class="vex_flex">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="1.5">
              <el-button @click="handleQuery">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button :disabled="selectedList.length !=1" @click="handleQuery(1)">查看</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button  :disabled="selectedList.length !=1" @click="delFun">删除</el-button>
            </el-col> -->
          </el-row>
        <VxeTableGrid
          style="flex: 1;"
          :tableColumn="tableColumn"
          :tableLoading="tableLoading"
          :dataList="dataList"
          :showPagination="true"
          :paginationParams="paginationParams"
          @getList="setQueryParams"
          @selectedChange="selectedChange"
        >
        </VxeTableGrid>
      </div>
      <el-dialog v-model="dialogFormVisible" title="新增">
        <SetUserSelect
          :key="keys"
          ref="setUserSelect"
          :formData="addorderSelect"
          v-model:queryParams="addpaginationParams"
          :isShowUserBtn="false"
          :buttonIsShow="false"
        ></SetUserSelect>
        <template #footer>
          <span class="dialog-footer">
            <el-button v-if="types != 1" @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisibleFun"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
     </template>
   </PanelSplitTwo>

  </div>
  
</template>
<script setup name="DepartmentList" lang="jsx">
import { useRouter, useRoute } from 'vue-router'
import { messageList as getList, addsystemmessage, upsystemmessage, messageById } from "@/api/basicManagement/information";
import { ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();
const { basi_department_status } = proxy.useDict("basi_department_status");
const route = useRoute();
import datas from './data.js'

const keys = ref(0)
const Id = ref('')
const { paginationParams, orderSelect, addorderSelect, addpaginationParams }  = datas
const tableColumn = ref([
  { type: "checkbox", width: 60, fixed: null },
  { field: "title", title: "消息标题" },
  { field: "userName", title: "收件人" },
  { field: "content", title: "内容" },
  { field: "createTime", title: "创建时间" },
  { field: "status", title: "状态",
  slots: { default: ({ row }, h) => {
    return row.status == 1? '已读' : '未读'
  }} }
])

watch(
  basi_department_status,
  (newV, oldV) => {
    console.log('fag21125', basi_department_status.value)
    orderSelect[2].selectData = basi_department_status.value;
    keys.value = new Date().getTime();
  }
);

const router= useRouter ()



const pageSize = ref(10);
let tableLoading = ref(false)
const dataList = ref([
])

// 切换分页
  function setQueryParams(val) {
    paginationParams.value.pageNum = val.pageNum;
    paginationParams.value.pageSize = val.pageSize;
    getListFun()
  }
  // 选择表格
  let selectedList = ref([])
  function selectedChange(val) {
    Id.value = val.currentItem.id
    selectedList.value = val.selectedList
    // this.form.customerId = val.currentItem.customerId;
  }
/** 搜索按钮操作 */
let types = ref('')
function handleQuery(type) {
  addpaginationParams.value = {
    userIdList: [],
  }
  types.value = type
  dialogFormVisible.value = true
  type == 1 && messageById(Id.value).then((res) => {
    res.data.userIdList = [res.data.userId]
    addpaginationParams.value = res.data
  })
}
const getListFun = () => {
  getList(paginationParams.value).then((res) => {
    dataList.value = res.rows
    paginationParams.value.total = res.total
  })
}

getListFun()
const selectFunc = () => {
  paginationParams.value.pageNum = 1
  getListFun()
}
const delFun = () => {
  ElMessageBox.confirm('是否确认删除?')
    .then(() => {
      delDepartment(Id.value).then(() => {
        proxy.$modal.msgSuccess(`删除成功`);
        getListFun()
      })
    })
    .catch(() => {
      // catch error
    })
  
}
const dialogFormVisible = ref(false)
const dialogFormVisibleFun  = () => {
  if (types.value == 1) {
    dialogFormVisible.value = false
    return
  }
  proxy.$refs.setUserSelect.submitForm().then((val) => {
    addsystemmessage(val).then(() => {
      proxy.$modal.msgSuccess(`新增成功`);
      dialogFormVisible.value = false
      getListFun()
    })
  })
}


</script>
<style scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 85px);
    overflow: hidden;
  }
  .vex_flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }
  .flexmin {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
</style>